<!DOCTYPE html>
<html lang="zh-CN"  xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="common/layout">
<head>
    <title>店铺修改</title>
    <script th:inline="javascript">
        $(function(){
            setTimeout(function(){
                $("#store_form").ajaxForm({
                            callback: function(data) {
                                if (data.valid) {
                                    self.location.href = data.url || '/';
                                } else {
                                    alert(data.errorMsg);
                                }
                            },
                            validate: function(data) {
                                var store_name = $("#store_name").val();
                                if(store_name.length==0){
                                    alert("店铺名不能为空");
                                    return false;
                                }
                                if(store_name.length>10){
                                    alert("店铺名最大长度为10");
                                    return false;
                                }
                                var store_desc = $("#store_desc").val();
                                if(store_desc.length==0){
                                    alert("店铺描述不能为空");
                                    return false;
                                }
                                if(store_desc.length>10){
                                    alert("店铺描述最大长度为10");
                                    return false;
                                }
                                return true;
                            }
                        }
                )
            },200);
        });

        function edit_cancel() {
            var storeId = [[${store.id}]]
            self.location.href = '/admin/store/'+storeId;
        };
    </script>
</head>
<body>
<section layout:fragment="top_menu" style="text-align: left;padding-left: 20px">
    <!--<span style="font-size: 20px">修改店铺</span>-->
</section>

<section layout:fragment="content">
    <div class="main" style="margin: 5px">
        <form id="store_form" class="form" th:action="@{/admin/store/{id}(id=${store.id})}" th:object="${store}" th:method="PUT">
            <table>
                <tbody>
                <tr>
                    <td style="text-align: right;">
                        <label for="store_name">店名</label>
                    </td>
                    <td>
                        <input id="store_name" th:field="*{name}"  type="text" >
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right;">
                        <label for="store_desc">店铺描述</label>
                    </td>
                    <td>
                        <input id="store_desc" th:field="*{description}"   type="text" >
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right; ">
                        店铺Logo
                    </td>
                    <td>
                        <div class="photo-c" th:if="*{logoUrl}">
                            <a target="_blank" th:href="*{logoUrl}">
                                <img th:src="*{logoUrl}" id="logo_id"  class="menu-img" alt="">
                            </a> <br>
                            <a href="javascript:uploadLogo()">重新上传</a>
                        </div>
                        <div class="photo-c" th:unless="*{logoUrl}" style="padding-left: 1rem">
                            <div id="photo-uploader" onclick="uploadLogo()">
                                <div class="plus">
                                    +
                                </div>
                                <div class="tips">
                                    请上传图片<br>（JPG或者PNG格式，小于3M）
                                </div>
                            </div>
                            <div class="hide" id="reupload_c">
                                <img src="" id="menu-img"  class="menu-img" alt="">
                                <br>
                                <a href="javascript:uploadLogo()">重新上传</a>
                            </div>
                        </div>
                        <input id="imgId" type ="hidden" th:field="*{logoId}" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: center">
                        <input type="submit" class=" new_button_yellow input_submit" value="保存">
                        <input type="button" onclick="javascript:edit_cancel()"  class=" new_button_yellow " value="取消">
                    </td>
                </tr>
                </tbody>
            </table>
        </form>
    </div>
</section>


<section layout:fragment="extra_scripts">
    <script src="/js/app.js"></script>
    <script src="/js/upload/jquery.ui.widget.js"></script>
    <script src="/js/upload/jquery.fileupload.js"></script>
    <script type="text/javascript" src="/js/uploader.js"></script>
    <script th:inline="javascript">
        function uploadLogo(){
            UploadManager.check_duplicate = false;
            UploadManager.onlyImages();
            UploadManager.upload();
        }

        window.uploadCallback = function(attachment) {
            attachment = attachment.data;
            // console.log(attachment);
            $("#photo-uploader").remove();
            $("#reupload_c").removeClass("hide");
//      $("#menu_submit").removeClass("hide");
            $("#logo_id").attr("src", attachment.url);
            $("#imgId").val(attachment.id);
        }

        function edit_cancel() {
            var user_id = [[${user.kind}]];
            var store_id = [[${user.storeId}]];
            if(user_id.$name=="ADMIN") {
                self.location.href = '/admin/store';
            }else {
                self.location.href = '/admin/store/mine/'+store_id;
            }
        };

    </script>
</section>

</body>

</html>
